<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Morningstar QuoteSpeed 2.0 Beta - Signup</title>
        <link href="../css/qs.css" rel="stylesheet" type="text/css" />
        <link href="../css/qs_ui.css" rel="stylesheet" type="text/css" />
        <link type="text/css" rel="stylesheet" href="../loginfile/signup.css"> 
	</head>
	<body id="regpage">
	    <div id="wrapper">
	        <div id="hd">
	            <div class="logo">
	                <img height="50" border="0" usemap="#Map" alt="Morningstar" src="../loginfile/mk_quotespeed_mornlogo.png">
	            </div>	            
	        </div>
            <div id="bd">
                <div class="banner">
	                <img height="200" width="993" border="0" alt="Introducing Morningstar QuoteSpeed Beta. When the market is moving, so can you." src="../loginfile/mk_quotespeed_main.png">
	            </div>
                <div class="content">
                    <div class="bar">
                        <span class="on">Step1</span> > <span>Step2</span> > <span>Step3</span>
                    </div>
                    <div class="description">
                        <div class="d">
                            <div class="d1 dd">
                                <h3>Welcome to Morningstar QuoteSpeed!</h3>
                                <p>
                                    Thank you for signing up for Morningstar QuoteSpeed.
                                </p>
                                <p>
                                    You now have access to Morningstar’s real time web based application. To get started, login to the following page with the credentials you created during registration: http://quotespeed.morningstar.com/
                                </p>
                                <img src="../loginfile/bg_step1.gif" />                                
                            </div>
                            <div class="d2 dd">
                                <h3>Welcome to Morningstar QuoteSpeed!</h3>
                                <p>
                                    Thank you for signing up for Morningstar QuoteSpeed.
                                </p>
                                <p>
                                    You now have access to Morningstar’s real time web based application. To get started, login to the following page with the credentials you created during registration: http://quotespeed.morningstar.com/
                                </p>
                                <img src="../loginfile/bg_step2.gif" />
                                <div class="disclaimer">
                                    
                                </div>
                            </div>
                            <div class="d3 dd">
                                <h3>Thank you for purchasing QuoteSpeed</h3>
                                <p>
                                    <strong>OPTIONAL CONTENT - REQUEST REAL TIME DATA:</strong> You can request to subscribe for real time exchanges. Please make your selections below to initiate the exchange entitlement process which will require faxing and signing exchange agreements to Morningstar. Your credit card will not be charged until you have been granted entitlement by the exchanges.
</p>
                                <img src="../loginfile/bg_step3.gif" />
                                <div class="disclaimer">
                                    <p><strong>Disclaimer:</strong> this page simply initiates the exchange entitlement process and does not guarantee the user entitlement. Upon submit, the entitlement process will be initiated and user will be required to sign and review the exchange agreements. Billing will be prorated on the first month based on date of entitlement and on a monthly basis moving forward.</p>
                                </div>
                            </div>
                        </div>                        
                    </div>
                    <div class="signup">
                        <div class="container">
                        <form>                     
                        <div class="steps">
                            <div class="step1">
                                <table cellpadding="0" cellspacing="0">
                                    <tbody>
                                        <tr><th>Personal Information</th><th><div><img src="../IM/bg_required.gif" />Required Fields</div></th></tr>
                                        <tr><td>Salutation</td><td>
                                            <select name="salutation" class="salutation">
                                                <option value=""></option>
                                            </select>
                                        </td></tr>
                                        <tr><td>First Name</td><td><input type="text" name="" value="" class="firstname required" maxlength="30" /><span class="msg">* Please enter your first name.</span></td></tr>
                                        <tr class="last"><td>Last Name</td><td><input type="text" name="" value="" class="lastname required" maxlength="30" /><span class="msg">* Please enter your last name.</span></td></tr>
                                    </tbody>
                                    <tbody>
                                        <tr><th colspan="2">User Name</th></tr>
                                        <tr><td>Email</td><td><input type="text" name="" value="" class="required email" maxlength="80" /><span class="msg">* Please enter an e-mail address.</span><span class="msg">* Please enter a valid e-mail address.</span></td></tr>
                                        <tr class="last"><td>Verify Email(email address must be valid to activate your account)</td><td><input type="text" name="" value="" class="required email" maxlength="80" /><span class="msg">* Please enter a verify e-mail address.</span><span class="msg">* Verify Email does not match the first input.</span></td></tr>
                                    </tbody>
                                    <tbody>
                                        <tr><th colspan="2">Password</th></tr>
                                        <tr><td>Password</td><td><input type="password" name="" value="" maxlength="15" class="required pass" /><span class="msg">* Please enter a password.</span><span class="msg">* Password must be between 6 and 15 characters.</span></td></tr>
                                        <tr class="last"><td>Verify Password</td><td><input type="password" name="" value="" maxlength="15" class="required pass" /><span class="msg">* Please re-enter your password.</span><span class="msg">* Verify Password must be between 6 and 15 characters.</span><span class="msg">* Password does not match the first input.</span></td></tr>
                                    </tbody>
                                    <tbody>
                                        <tr><th colspan="2">Address</th></tr>
                                        <tr><td>Address 1</td><td><input type="text" name="" value="" maxlength="30" style="ime-mode:disabled" class="address required nopun" /><span class="msg">* Please enter your address.</span><span class="msg">* Only letters, numbers and space are allowed.</span></td></tr>
                                        <tr><td>Address 2</td><td><input type="text" name="" value="" maxlength="30" class="address nopun" /><span class="msg"></span><span class="msg">* Only letters, numbers and space are allowed.</span></td></tr>
                                        <tr><td>City</td><td><input type="text" name="" value="" class="city required" maxlength="30" /><span class="msg">* Please enter your city.</span></td></tr>
                                        <tr><td>State</td><td>
                                                <select class="state required" id="state" name="state">
                                                	<option value="" selected="selected">Select State ..</option> 
                                                    <option value="FN"></option>                                               	                                                
                                                </select>
                                                <span class="msg">* Please select your state.</span>
                                            </td>
                                        </tr>                                        
                                        <tr><td>Zip Code</td><td><input type="text" name="" value="" class="required zip" maxlength="20" /><span class="msg">* Please enter a zip code.</span><span class="msg">* Please enter a valid zip code.</span></td></tr>
                                        <tr><td>Country</td><td>
                                            <select class="country" name="country" id="country">
                                                <option value="">xxx</option>
                                                <option value="USA">usa</option>
                                            </select>
                                        </td></tr>
                                        <tr><td>Telephone</td><td><input type="text" name="" value="" maxlength="30" class="phone" /><span class="msg"></span><span class="msg">* Please enter a valid phone number.</span></td></tr>
                                        <tr class="last"><td>Mobile</td><td><input type="text" name="" value="" maxlength="30" class="phone" /><span class="msg"></span><span class="msg">* Please enter a valid phone number.</span></td></tr>
                                    </tbody>
                                    <tbody>
                                        <tr><th colspan="2">Professional Information</th></tr>
                                        <tr><td>Job Title</td><td><input type="text" name="" value="" maxlength="30" class="jobtitle" /></td></tr>
                                        <tr class="last"><td>Firm Name</td><td><input type="text" name="" value="" maxlength="50" class="firm" /></td></tr>
                                    </tbody>                                    
                                </table>
                            </div>
                            <div class="step2">
                                <table cellpadding="0" cellspacing="0">
                                    <colgroup><col width="300px" /><col width="283px" /></colgroup>
                                    <tbody>
                                        <tr><th colspan="2">                                            
                                            <img name="lock" src="../IM/lock.gif" alt="" style="float: left; margin: 0pt 10px 6px 0px;" width="19" height="24">
                                            <span id="creditCardCopy">Please make your selections below. Your credit card will be charged based on the payment plan selected.</span>          
                                        </th></tr>
                                        <tr>
                                            <td colspan="2">
                                                <table cellspacing="0" cellpadding="0" class="pricetable">
                                                  <colgroup><col width="294px" /><col width="56px" /><col width="64px" /><col width="76px" /><col width="56px" /></colgroup>
                                                  <tr class="tl">
                                                    <th>Pricing Table</th><th>Monthly</th><th>Quarterly</th><th>Semiannual</th><th>Annual</th>
                                                  </tr>
                                                  <tr>
                                                    <th colspan="5">Solution</th>
                                                  </tr>
                                                  <tbody class="tbsolution">
                                                  <tr>
                                                    <td></td><td></td><td></td><td></td><td></td>
                                                  </tr>
                                                  </tbody>
                                                  <tr class="noshow">
                                                    <th colspan="5">Add-On Services</th>
                                                  </tr>
                                                  <tbody class="tbaddon noshow">
                                                  <tr>
                                                    <td></td><td></td><td></td><td></td><td></td>
                                                  </tr>
                                                  </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr><th colspan="2">Permission Group</th></tr>                                        
                                        <tr><td>Product Solution</td><td>                                            
                                            <select name="solution" class="solution"></select>
                                        </td></tr>
                                        <tr class="noshow"><td>Add-On Services</td><td>                                            
                                            <ul class="addon"></ul>
                                        </td></tr>   
                                        <tr><td>Payment Plan</td><td>                                            
                                            <ul class="paymentplan"></ul>
                                        </td></tr>
                                        <tr><td>Subscription Information</td><td>                                            
                                            <table cellpadding="0" cellspacing="0" class="paymentresult">
                                                <tr class="t1"><th colspan="2">Your selection:</th></tr>
                                                <tbody class="sltsolution">
                                                    <tr><td></td><td nowrap="nowrap"></td></tr>
                                                </tbody>
                                                <tr><td>Your credit card will be charged</td><td nowrap="nowrap" class="paytotal toright"></td></tr>
                                            </table>
                                        </td></tr>                                    
                                    </tbody>
                                    <tbody>
                                        <tr><th colspan="2">Credit Card Information</th></tr>
                                        <tr><td></td><td>
                                            <img border="0" style="padding-left: 5px;" src="../IM/creditcard.gif">
                                        </td></tr>
                                        <tr><td>Card Type</td><td>
                                                <select id="cctype" name="cctype" class="creditcard required"></select>
                                        </td></tr>
                                        <tr><td>Card Number</td><td><input type="text" name="" value="" class="required number creditcard" maxlength="16" /><span class="msg">* Please enter a credit card number.</span><span class="msg">* Please enter a valid credit card number.</span></td></tr>
                                        <tr><td>Expiration Date:</td><td>
                                            <select id="ccmonth" name="ccmonth" class="middle">
                                            	<option value="01">Jan (1)</option>
                                            	<option value="02">Feb (2)</option>
                                            	<option value="03">Mar (3)</option>
                                            	<option value="04">Apr (4)</option>
                                            	<option value="05">May (5)</option>
                                            	<option value="06">Jun (6)</option>
                                            	<option value="07">Jul (7)</option>
                                            	<option value="08">Aug (8)</option>
                                            	<option value="09">Sep (9)</option>
                                            	<option value="10">Oct (10)</option>
                                            	<option value="11">Nov (11)</option>
                                            	<option value="12">Dec (12)</option>                                            
                                            </select>
                                            <select id="ccyear" name="ccyear" class="middle">
                                            	<option value="09">2009</option>
                                            	<option value="10">2010</option>
                                            	<option value="11">2011</option>
                                            	<option value="12">2012</option>
                                            	<option value="13">2013</option>
                                            	<option value="14">2014</option>
                                            	<option value="15">2015</option>
                                            	<option value="16">2016</option>                                            
                                            </select>
                                        </td></tr>
                                        <tr><td>Sales Employee ID:</td><td><input type="text" name="" value="" class="number sed required" /></td></tr>
                                        <tr class="last"><td colspan="2">
            Your registration indicates agreement to the Morningstar.com <a href="http://members.morningstar.com/memberstpages/PremUserAgree.html" class="Premlink2" target="_blank">terms of use</a>.
          </td></tr>
                                    </tbody>                                    
                                </table>
                            </div>
                            <div class="step3">
                                <div id="step3_tabmenu"></div>  
                            </div>
                        </div>                        
                        </form>
                        </div>
                        <button class="btn next">Continue</button><button class="btn back">Back</button>                     
                    </div>                    
                </div>              
            </div>
            <div id="ft">
                <div class="footer">                    
                    <p>
                        Independent.
                        Insightful. Trusted. Morningstar provides stock market analysis;
                        equity, mutual fund, and ETF research, ratings, and picks; portfolio
                        tools; and option, hedge fund, IRA, 401k, and 529 plan research. Our
                        reliable data and analysis can help both experienced enthusiasts and
                        newcomers.
                    </p>
                    <p>
                        © Copyright 2011 Morningstar, Inc. All rights reserved. Please read our <a href="http://www.morningstar.com/AboutUs/copyright.html">Terms of Use</a>
                        and <a href="http://members.morningstar.com/memberstpages/PrivacyPolicy.html">Privacy Policy</a>.
                    </p>                
                </div>
            </div>
	    </div>
        <script src="../lib/jquery.js" type="text/javascript"></script>
        <script src="../lib/jquery.json.min.js" type="text/javascript"></script>
        <script src="../js/ui/util.js" type="text/javascript"></script>
        <script src="../js/ui/tabmenu.js" type="text/javascript"></script>
        <script src="../js/ui/scrollpanel.js" type="text/javascript"></script>
        <script src="../js/ui/window.js" type="text/javascript"></script>
        <script src="../js/validation.js" type="text/javascript"></script>
        <script>            
            var step=1;
            var w=0;
            var container=$('div.container');
            var h;
            var btn=$('.btn');
            var msgWin=null;
            var getDataUrl='http://rtqdev.morningstar.com/admin/testRegPageConfig.jsp';
            var postDataUrl='http://rtqdev.morningstar.com/admin/testRegPagePost.jsp';
            var postDataUrl2='http://rtqdev.morningstar.com/admin/testRegExchPost.jsp';
            var configData=null;//config data for registratin page
            var personalData=null;
            var exchangeData=null;
            var returnData=null;//return data after post
            var totalPay=0;
            var tabDom=[];
            var allField=[];
            var sltahandler=$('.salutation').eq(0);//select salutation
            var fnhandler=$('.firstname').eq(0);//first name
            var lnhandler=$('.lastname').eq(0);//last name
            var emailhandler=$('.email').eq(0);//email;
            var pwdhandler=$('.pass').eq(0);//password
            var ad1handler=$('.address').eq(0);//address1
            var ad2handler=$('.address').eq(1);//address2
            var cthandler=$('.city').eq(0);//city            
            var statehandler=$('.state').eq(0);//select state
            var zchandler=$('.zip').eq(0);//zipcode
            var ctyhandler=$('.country').eq(0);//select country
            var phonehandler=$('.phone').eq(0);//telephone
            var mobilehandler=$('.phone').eq(1);//mobile
            var titlehandler=$('.jobtitle').eq(0);//job title;
            var firmhandler=$('.firm').eq(0);//firm name;
            var slthandler=$('.solution').eq(0);//select solution
            var addhandler=$('.addon').eq(0);//select addon
            var payhandler=$('.paymentplan').eq(0);//select payment
            var cctypehandler=$('.creditcard').eq(0);//select creditcard
            var credithandler=$('.creditcard').eq(1);//creditcard number
            var expyhandler=$('#ccyear');//expiration date year
            var expmhandler=$('#ccmonth');//expiration date month
            var saleshandler=$('.sed').eq(0);//sales employee ID
            var dynamicDom=$('.sltsolution').eq(0);
            var totalPayDom=$('.paytotal').eq(0);            
            var solutionName='';//solution name
            var solutionCode='';//solution product code
            var solutionScr='';//solution sourcecode
            var solutionPrice='';//solution price
            var payplanId='';//payment plan id
            var payplanName='';//payment plan name
            var CustomerID='';//get customer id from post callback
            var SubscriptionID='';//get subscription id from post callback
            var exchangeArray=[];
            var message={
                "0":"Submitted successfully!",
                "1011":"You already have an existing account with Morningstar using the email you provided, please contact your Morningstar Sales Representative to reactivate your account.",
                "1000":"RECODE_FAILED_INVALID_REGPAGE_INFO",
	            "1010":"RECODE_FAILED_REGISTER_TO_GLOBALLOGIN",
	            "1020":"RECODE_FAILED_REGISTER_TO_GLOBE",
	            "1030":"RECODE_FAILED_REGISTER_TO_QSDB",
	            "1040":"RECODE_FAILED_SUBPRODUCT_TO_GLOBE",
	            "1050":"RECODE_FAILED_PAYTRANS_GLOBE",
	            "1060":"RECODE_FAILED_CREDITCARD_PAYMENTECH",
	            "1070":"RECODE_FAILED_UPDATE_CCCHECK_GLOBE",
	            "1080":"RECODE_FAILED_SUBEXCHANGE_TO_GLOBE",
	            "1090":"RECODE_FAILED_SEND_EMAIL"
            };
            tabData = [];
            var scrollbar=[];
            var w,h;
            var tab = new Util.TabMenu($('#step3_tabmenu')[0], [], {
                onActive: function(tab){
                    if(tab){
                        var id=tab.id;
                        if(scrollbar.length>0){
                            w=$('.step3').width()-5;
                            h=$('.step3').height()-40;
                            scrollbar[id].reSize(w,h); 
                        } 
                    }                                       
                }
            }, {
                width: 100,
                autoResize: false,
                tabsList: false
            });
            
            var validation=new Util.Validator({
                onError:function(o,n){                    
                    $(o).addClass('error');
                    $(o).nextAll('.msg').eq(n).show();
                    if(n>0){$(o).nextAll('.msg').eq(n-1).hide();}
                }
            });
            var wwg=new Util.WindowGroup('regpage',{},{});
            var openMsg=function(code){
//                code='0';                
                if (!msgWin) {
                    msgWin=new Util.RtqWindow('regpage',{
                        windowReady: function(obj){
                            obj.setHtml('<div class="regmsg"><div class="regmsgicon"><img src="../loginfile/msg_error.jpg" width="50px" height="50px" /></div><div class="regmsgcont"><h5 class="regmsgtitle"></h5><p></p></div><div class="regfooter"><button class="regclose">OK</button></div></div>');
                            if(code=='0'){
                                $('.regmsgicon img').attr({src:'../loginfile/msg_success.jpg'});
                            }else{$('.regmsgicon img').attr({src:'../loginfile/msg_error.jpg'});}
                            $('.regmsgcont p').html(message[code]);
                            $('.regclose').bind('click', function(e){
                                obj.hide();
                            });
                        }
                    },{
                        title:'Message',
                        width:250,
                        height:120,
                        minWidth:200,
                        minHeight:100,
                        resizable:false,
                        isGlobal:true,
                        top:200
                    });
                    wwg.register(msgWin);
                }else{
                    msgWin.show();
                }
            }           
            
            var creditCharge=function(){
                var sltObj=slthandler;
                var rdoPay=$('.paymentplan input:checked');
                if(configData&&configData.Solution){
                    var sData=configData.Solution;
                    var mData=configData.PaymentPlan;               
                    var k=sData.length;                   
                    dynamicDom.empty();                    
                    for(var i=0;i<k;i++){
                        if(sData[i].SourceCode==sltObj.val()){
                            if(sData[i].Price){                                
                                var n=mData.length;
                                for(var o=0;o<n;o++){
                                    if(mData[o].Value==rdoPay.val()){
                                        dynamicDom.append('<tr><td>Payment Plan</td><td nowrap="nowrap" class="toright">'+mData[o].Text+'</td></tr>'); 
                                        payplanId=mData[o].Value;  
                                        payplanName=mData[o].Text;                                
                                    }
                                }
                                var pData=sData[i].Price;
                                var m=pData.length;
                                for(var l=0;l<m;l++){
                                    if(pData[l].PaymentPlan==rdoPay.val()){
                                        dynamicDom.append('<tr><td>'+sData[i].Name+'</td><td nowrap="nowrap" class="toright">$'+pData[l].Price+'</td></tr>');                            
                                        totalPay=pData[l].Price;
                                        totalPayDom.html('$'+totalPay);
                                        solutionName=sData[i].Name;
                                        solutionCode=sData[i].ProductCode;
                                        solutionScr=sData[i].SourceCode;
                                        solutionPrice=pData[l].Price;
                                    }
                                }                                
                            }                            
                        }                            
                    }
                }
            };
            var getData=function(){
                $.getJSON(getDataUrl,function(data){
                    configData=data;
                    if(data.Solutation){
                        var oData=data.Solutation;
                        var sltObj=sltahandler;
                        var k=oData.length;
                        sltObj.empty();
                        for(var i=0;i<k;i++){
                            sltObj.append('<option value="'+oData[i].Value+'">'+oData[i].Text+'</option>');
                        }
                    }
                    if(data.Country){
                        var oData=data.Country;
                        var sltObj=ctyhandler;
                        var k=oData.length;
                        var isSelect;
                        sltObj.empty();
                        for(var i=0;i<k;i++){
                            isSelect=oData[i].Value=='USA'?'selected="selected"':'';
                            sltObj.append('<option value="'+oData[i].Value+'" '+isSelect+'>'+oData[i].Text+'</option>');
                        }
                    }
                    if(data.State){
                        var oData=data.State;
                        var sltObj=statehandler;
                        var k=oData.length;
                        sltObj.empty();
                        sltObj.append('<option value="">Select State..</option>');
                        for(var i=0;i<k;i++){
                            sltObj.append('<option value="'+oData[i].Value+'">'+oData[i].Text+'</option>');
                        }
                    }
                    if(data.Solution){
                        var oData=data.Solution;
                        var sltObj=slthandler; 
                        var tbObj=$('.tbsolution').eq(0);                    
                        var k=oData.length;
                        sltObj.empty();
                        tbObj.empty();
                        for(var i=0;i<k;i++){
                            if(oData[i].IsTrial==false){
                                sltObj.append('<option value="'+oData[i].SourceCode+'">'+oData[i].Name+'</option>'); 
                                if (oData[i].Price) {
                                    tbObj.append('<tr><td>' + oData[i].Name + '</td><td>$' + oData[i].Price[0].Price + '</td><td>$' + oData[i].Price[1].Price + '</td><td>$' + oData[i].Price[2].Price + '</td><td>$' + oData[i].Price[3].Price + '</td></tr>');
                                }
                            }                            
                        }
                    }
                    if(data.AddOn){
                        var oData=data.AddOn;
                        var sltObj=addhandler;
                        var tbObj=$('.tbaddon').eq(0);
                        var k=oData.length;
                        sltObj.empty();
                        tbObj.empty();
                        for(var i=0;i<k;i++){
                            if(oData[i].IsTrial==false){
                                sltObj.append('<li><input type="checkbox" value="'+oData[i].SourceCode+'" class="chk" name="addon" id="addon_'+oData[i].SourceCode+'" /><label for="addon_'+oData[i].SourceCode+'">'+oData[i].Name+'</label></li>'); 
                                if (oData[i].Price) {
                                    tbObj.append('<tr><td>' + oData[i].Name + '</td><td>$' + oData[i].Price[0].Price + '</td><td>$' + oData[i].Price[1].Price + '</td><td>$' + oData[i].Price[2].Price + '</td><td>$' + oData[i].Price[3].Price + '</td></tr>');
                                }
                            }                            
                        }
                    }
                    if(data.PaymentPlan){
                        var oData=data.PaymentPlan;
                        var sltObj=payhandler;
                        var k=oData.length;
                        var checked='';
                        sltObj.empty();
                        for(var i=0;i<k;i++){
                            if(oData[i].Value!='1'){
                                if(oData[i].Value=='3'){checked='checked="checked"'}else{checked=''}
                                sltObj.append('<li><input type="radio" value="'+oData[i].Value+'" class="chk" name="paymentplan" id="addon_'+oData[i].Value+'" '+checked+' /><label for="addon_'+oData[i].Value+'">'+oData[i].Text+'</label></li>'); 
                            }                            
                        }
                    }
                    if(data.CreditCard){
                        var oData=data.CreditCard;
                        var sltObj=cctypehandler;
                        var k=oData.length;
                        sltObj.empty();
                        sltObj.append('<option value="">Select card type..</option>');
                        for(var i=0;i<k;i++){
                            sltObj.append('<option value="'+oData[i].Value+'">'+oData[i].Text+'</option>');
                        }
                    }
                    if(data.Exchange){
                        var oData=data.Exchange;
                        var gData;
                        var pData;
                        var opData;                        
                        var k=oData.length;
                        var m=0,n=0,o=0;
                        for(var i=0;i<k;i++){
                            tabData.push({txt:oData[i].Name,id:i,closable:false});
                            gData=oData[i].Group;
                            m=gData.length;
                            var objStr='';                            
                            for(var j=0;j<m;j++){
                                pData=gData[j].Product;
                                n=pData.length;
                                objStr+='<ul class="package"><li class="packagename">'+gData[j].Name+'</li>';
                                for(var l=0;l<n;l++){                                    
                                    if(pData[l].HasOptions==true){
                                        objStr+='<li class="product"><div><input type="checkbox" name="product" value="" id="p'+pData[l].SmsCode+'" class="chk" /><label for="p'+pData[l].SmsCode+'" text="'+pData[l].Name+' ('+pData[l].SmsCode+')" class="lb">'+pData[l].Name+'</label></div>';
                                        opData=pData[l].Options;
                                        o=opData.length;
                                        objStr+='<ul class="options">';
                                        for(var t=0;t<o;t++){
                                            objStr+='<li class="option"><input type="radio" name="options" value="'+opData[t].ProductCode+'" id="op'+opData[t].ProductCode+'" class="opt" /><label for="op'+opData[t].ProductCode+'">'+opData[t].Name+'</label><span>'+opData[t].Currency+' '+opData[t].Price+'</span></li>';
                                        }
                                        objStr+='</ul>';
                                    }else{
                                        objStr+='<li class="product"><div><input type="checkbox" name="product" value="'+pData[l].ProductCode+'" id="p'+pData[l].ProductCode+'" class="chk" /><label for="p'+pData[l].ProductCode+'" text="'+pData[l].Name+' ('+pData[l].SmsCode+')" class="lb">'+pData[l].Name+'</label><span>'+pData[l].Currency+' '+pData[l].Price+'</span></div>';
                                    }
                                    objStr+='</li>';
                                }
                                objStr+='</ul>';                                
                            }
                            tabDom[i]=objStr;
                        }
                        tab.reBindData(tabData);
                        for(var i=0;i<k;i++){
                            tab.tabs[i].panel.html('<div class="data exchdata">'+tabDom[i]+'</div>');
                            w=$('.step3').width()-5;
                            h=$('.step3').height()-40;
                            scrollbar[i]=new Util.ScrollPanel(tab.tabs[i].panel.find('.data'));
                            scrollbar[i].reSize(w,h);
                        }
                    }
                    creditCharge();  
                    $('.paymentplan input').bind("click",function(e){creditCharge()});
                    $('input.chk').bind("click",function(e){
                        if (!this.checked) {
                            if($('input.opt').length>0){$('input.opt').attr({checked:''});}                           
                        }                        
                    });               
                    $('input.opt').bind("click",function(e){
                        $(this).parent('li.product').find('input.chk').attr({checked:'checked'});
                        var content=$(this).parent('li.product').find('label.lb').html()+$(this).next('label').html();
                        var content2=$(this).parent('li.product').find('label.lb').attr('text')+$(this).next('label').html();
                        $(this).parent('li.product').find('label.lb').html(content);
                        $(this).parent('li.product').find('label.lb').attr({text:content2});
                    });
                }); 
            };            
            var callBacks=function(data){
//                {"Code":"1010","Message":"","CustomerID":"12345","SubscriptionID":""}
                if(data.Code){                    
                    openMsg(data.Code);
                }
            };
            var postData=function(url,data,callback){
                $.post(url,data,callback,'json');
            };
            var step2data=function(){
                personalData={
                    "Salutation":""+sltahandler.val()+"",
                    "FirstName":""+fnhandler.val()+"",
                    "LastName":""+lnhandler.val()+"",
                    "Email":""+emailhandler.val()+"",
                    "Password":""+pwdhandler.val()+"",
                    "Address1":""+ad1handler.val()+"",
                    "Address2":""+ad2handler.val()+"",
                    "City":""+cthandler.val()+"",
                    "State":""+statehandler.val()+"",
                    "StateText":""+statehandler.find('option:selected').text()+"",
                    "ZipCode":""+zchandler.val()+"",
                    "Country":""+ctyhandler.val()+"",
                    "CountryText":""+ctyhandler.find('option:selected').text()+"",
                    "Telephone":""+phonehandler.val()+"",
                    "Mobile":""+mobilehandler.val()+"",
                    "JobTitle":""+titlehandler.val()+"",
                    "FirmName":""+firmhandler.val()+"",
                    "Solution":{
                        "Name":""+solutionName+"",
                        "ProductCode":""+solutionCode+"",
                        "SourceCode":""+solutionScr+"",
                        "Amount":""+solutionPrice+""//amount is 0 on Trial page
                    },
                    "AddOn":[],
                    "CreditCard":{
                        "Type":""+cctypehandler.val()+"",
                        "Number":""+credithandler.val()+"",
                        "ExpiredDate":""+expyhandler.val()+expmhandler.val()+""
                    },
                    "ProductTotalCost":""+totalPay+"",
                    "PaymentPlanID":""+payplanId+"",
                    "PaymentPlanName":""+payplanName+"",
                    "EmpID":""+saleshandler.val()+""
                };
                postData(postDataUrl,personalData,callBacks);
            };
            var step3data=function(){
                exchangeArray=[];
                var chkObj=$('.exchdata input.chk:checked');
                var k=chkObj.length;
                var exchName='',ProductCode='';
                for(var i=0;i<k;i++){
                    exchName=chkObj.eq(i).next('label').attr('text');
                    ProductCode=chkObj.eq(i).val();
                    exchangeArray.push({
                        "Name":""+exchName+"",
                        "ProductCode":""+ProductCode+""
                    });
                }
                exchangeData={                    
                    "Salutation":""+sltahandler.val()+"",
                    "FirstName":""+fnhandler.val()+"",
                    "LastName":""+lnhandler.val()+"",
                    "Email":""+emailhandler.val()+"",
                    "Address1":""+ad1handler.val()+"",
                    "Address2":""+ad2handler.val()+"",
                    "City":""+cthandler.val()+"",
                    "State":""+statehandler.val()+"",
                    "StateText":""+statehandler.find('option:selected').text()+"",
                    "ZipCode":""+zchandler.val()+"",
                    "Country":""+ctyhandler.val()+"",
                    "CountryText":""+ctyhandler.find('option:selected').text()+"",
                    "Telephone":""+phonehandler.val()+"",
                    "Mobile":""+mobilehandler.val()+"",
                    "JobTitle":""+titlehandler.val()+"",
                    "FirmName":""+firmhandler.val()+"",                    
                    "CustomerID":""+CustomerID+"",
                    "SubscriptionID":""+SubscriptionID+"",
                    "EmpID":""+saleshandler.val()+"",
                    "Exchange":exchangeArray
                };
                postData(postDataUrl2,exchangeData,callBacks);
            };
            var goon=function(o){
                var i;
                allField=[];
                validation.reset(); 
                $('div.step'+step+' input.error').removeClass('error'); 
                $('.msg').hide();           
                if($(o).hasClass('next')){
                    $('div.step'+step+' input').each(function(i){
                        allField.push(this);                               
                    });
                    $('div.step'+step+' select').each(function(i){
                        allField.push(this);                               
                    });
                    var z=allField.length;
                    for(var x=0;x<z;x++){
                        validation.test(allField[x]);
                        $(allField[x]).bind('click',function(e){
                            $(this).removeClass('error');
                            $(this).nextAll('.msg').hide();
                        });
                    }
                    if(validation.Pass==false){
                        h=$('.step'+step).height();
                        container.css({height:h});
                        return false;
                    }
                    if(step==1){
                        if($('.step1 .email')[0].value!=$('.step1 .email')[1].value){
                            $('.step1 .email').eq(1).addClass('error');
                            $('.step1 .email').eq(1).nextAll('.msg').eq(2).show();
                            return false;
                        }
                        if($('.step1 .pass')[0].value!=$('.step1 .pass')[1].value){
                            $('.step1 .pass').eq(1).addClass('error');
                            $('.step1 .pass').eq(1).nextAll('.msg').eq(2).show();
                            return false;
                        }                        
                    }
                    
                    i=-1;
                    if(step>0){$(o).html('Submit');}
                    if(step==2){step2data();}
                    else if(step==3){step3data();}
                    w=i*step*583; 
                }else if($(o).hasClass('back')){
                    i=1;
                    if(step==1){return false;}
                    $('.next').html('Continue');
                    w=w+i*583;
                }else{return false;}                
                
                $(".steps").animate({left:w+'px'}, "slow");                
                step=step-i;
                h=$('.step'+step).height();
                container.css({height:h});
                if(step!=2){$('.back').hide()}else{$('.back').show()}
                var j=step-1;
                $('.bar span').removeClass('on');
                $('.bar span').eq(j).addClass('on');
                $('div.dd').hide();
                $('div.d'+step).show();         
            };
            
            btn.bind("click",function(e){goon(this)});            
            slthandler.bind("change",function(e){creditCharge()});
            ctyhandler.bind("change",function(e){
                if(this.value!='USA'){
                    statehandler[0].options[1].selected=true;
                    statehandler[0].disabled='disabled';
                }else{
                    statehandler[0].disabled='';
                }
            });                    
            
            $('div.dd').hide();
            $('div.d1').show(); 
            h=$('.step1').height();
            container.height(h);
            
            if(step!=2){
                $('.back').hide();
                $('.step1 .email').bind('focus',function(e){
                    $(this).bind('blur',function(e){
                        $(this).removeClass('error');
                        $(this).nextAll('.msg').hide();
                        validation.test(this);
                    });
                });
                $('.step1 .pass').bind('focus',function(e){
                    $(this).bind('blur',function(e){
                        $(this).removeClass('error');
                        $(this).nextAll('.msg').hide();
                        validation.test(this);
                    });
                });                
            }else{
                $('.back').show();
            }
            
            getData();
        </script>
	</body>
</html>
